<script type="text/javascript">
var FLAG_CLICK = true;    
$(document).ready(function() {
    product_filter();

    $('.list-role').click( function( e ) {
    if(FLAG_CLICK == true){
        FLAG_CLICK = false;
        var roleid = $(this).attr('roleid');
        var url = '<?php print site_url('roles/role_permission');?>';
        $('.roleactive').removeClass('roleactive');
        $(this).addClass('roleactive');
        
        $('#permission_list').fadeOut(400,function(){
            $('#warpp-right-loading').fadeIn(400,function(){
                $.post(url, { id: roleid },function(data){
                    $('#permission_list').html(data);
                    updateRolePermission();
                    tooltip();
                    $('#warpp-right-loading').delay(200).fadeOut(400,function(){
                        $('#permission_list').fadeIn(500);
                        FLAG_CLICK = true;
                    });
                    
                });
                
            });
        });
    }else{
        //$('#permission_list').stop().hide();
        //$('#permission_loading').stop().hide();
        //FLAG_CLICK = true;
    }
        
        /*if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
            _DATATABLE_TR = null;
        }else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
            _DATATABLE_TR = $(this).attr('value_id');
        }*/
    });
    
} );
function tooltip(){
    $('td').tooltip({
        track: true
    });
}
/*
    product Filter
*/
function product_filter(){    
    // Do the actual search/filtering
    $('input#pro-filter').keyup(function(e){
        e.preventDefault();
        var term = $(this).val().toLowerCase();
        $('#product-list .list-role').css('display', 'block');
        $('#product-list .list-role').each(function(intIndex){
            var field = $(this).children('p').text().toLowerCase();
            if (field.indexOf(term) == -1){
                $(this).css('display', 'none');
            }
        });
    });
}

function updateRolePermission(){
    $(".permission-table input.change-premission:checkbox").unbind("click").click(function(){
        var $op = $(this).parent();
        $op.html('....');
        
        var url = $(this).attr("rel");
        $.get(url, function(html){
            $op.html(html);
            $op.addClass('permission-up');
            updateRolePermission();
        });
        return false;
    });
}  
</script>

<!--
<div class="page-title 1ui-widget-header">
    <div class="title">Phieu Nhap KHo</div>
</div>
-->
<div class="warpp">
    
    <div class="warpp-left">
        <div class="panel-listsearch">
            <div style="" id="search-form">
                <input id="pro-filter" type="text" placeholder="search..." value="" class="list-search">
            </div>
        </div>
        <div id="product-list" class="scrollable-listsearch">
            <?php if( count($roles) > 0 ): ?>
            <?php foreach( $roles As $role ): ?>
            <div roleid="<?php print $role->role_id; ?>" class="list-role">
                <p>
                    <b><span filter="name"><?php print $role->role_name; ?></span></b>
                </p>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>    
        </div>
    </div>
    <div class="warpp-right">
        <div id="warpp-right-loading" style="display: none;">
            <img class="icon_loading_1" src="<?php print base_url('template/ess/images/loading/loading_3.gif') ?>" alt="loading...">
        </div>
        <div id="permission_list">
            <div style="text-align: center; padding: 30px;"><button onclick="window.location.href='<?php print site_url('permission'); ?>'"><?php print lang('menu_permission') ?></button></div>
            
            <div style="text-align: center; padding: 30px;"><button onclick="window.location.href='<?php print site_url('roles'); ?>'"><?php print lang('menu_role') ?></button></div>
        </div>

    </div>
    <div class="clear"></div>
</div>